<template>
  <div>
  <h3>发表评论</h3>
   <hr>
   <textarea placeholder="请输入评论内容" maxlength="120"></textarea>
   <mt-button type="primary" size="large">发表评论</mt-button>
   <div class="cmt-list">
      <div class="cmt-item" v-for="(item,i) in comments" :key="item.add_time">
            <div class="cmt-title">
               第{{i+1}}楼&nbsp;&nbsp;用户名:{{item.user_name=='匿名用户'?'匿名用户':item.user_name}};发表时间:{{item.add_time|dateFormat}}         
            </div>
            <div class="cmt-body">
                   {{item.content==''?'很好':item.content}} 
            </div>
      </div>
   </div>
   <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
  </div>
   </div>
</template>
<script>
import {Toast} from 'mint-ui'
   export default{
     data(){
       return{
         pageIndex:1,
         comments:[]
       };
     },
     created(){
        this.getComments();
     },
     methods:{
       getComments(){
         this.$http.get("api/getcomments/"+this.id+"/?pageindex="+this.pageIndex).then(result=>{
           if(result.body.status===0){
             this.comments=this.comments.concat(result.body.message);
           }else{
             Toast(this.pageIndex);
           }
         })
       },
       getMore(){
         this.pageIndex++;
         this.getComments();
       }
     },
     props:['id']
   }

</script>
<style lang="scss" scoped>
  .cmt-list .cmt-title{
    font-size:11px;
    background-color: #ccc;
    lineheight:30px;
  }
  .cmt-list .cmt-body{
    font-size:11px;
  }

</style>
